Skip to main content

Pie Chart Component

1. Introduction​

The Pie Chart component is a data visualization tool used to represent proportions or percentages of a whole. It divides data into slices, with each slice representing a specific category or value. This component is ideal for applications that require users to compare parts of a dataset relative to the total.

image

Purpose and Use Cases​

  • Purpose: The Pie Chart component is used to visualize data as proportions of a whole, making it easy to understand the relative sizes of different categories.
  • Primary Use Cases:
    • Displaying market share, survey results, or budget allocations.
    • Comparing proportions in datasets.
    • Highlighting the largest or smallest contributors to a total.

Benefits​

  • Intuitive Visualization: Provides a clear and simple way to understand data proportions.
  • Customizable: Offers extensive styling options for slices, legends, and chart positioning.
  • Responsive Design: Adapts seamlessly to different screen sizes and devices.
  • User-Friendly: Enhances the user experience by presenting data in a visually appealing format.

2. Properties​

The Pie Chart component comes with several configurable properties to suit different use cases. Below is a detailed breakdown:

Code​

  • Description: A unique identifier for the component.
  • Purpose: Used to reference the component programmatically.
  • Required/Optional: Required

Title​

  • Description: The title displayed above the chart.
  • Purpose: Provides context for the chart's data.
  • Required/Optional: Optional

Slices​

  • Description: Represents the individual segments of the pie chart.
  • Purpose: Each slice corresponds to a specific category or value in the dataset.
  • Attributes for Each Slice:
    • Code: A unique identifier for the slice.
    • Name: The name of the slice (e.g., category or label).
    • Value: A numeric value representing the size of the slice.
    • Cross: A button to delete the slice from the chart.
  • Additional Configuration:
    • + Add Slice Button: Allows users to add extra slices to the chart.

3. Style​

The Pie Chart component offers extensive styling options to ensure it aligns with the application's design. Below are the key styling properties:

Size and Position​

  • Reset: Resets size and position settings to default.
  • Size:
    • Width & Height: Define the dimensions of the chart.
    • Min Size: Minimum width and height (default: none).
    • Max Size: Maximum width and height (default: none).
  • Position:
    • Alignment: Left, right, top, bottom (default: left, top).
    • X Position: Horizontal offset from the edge.
    • Y Position: Vertical offset from the edge.
  • Z-Index: Specifies the stack order of the chart (default: 0).
  • Fixed Position: Locks the chart's position on the screen (default: OFF).
  • Hidden: Hides the chart from view (default: OFF).

Legend​

  • Visible:
    • Description: Determines whether the legend is displayed.
    • Default: ON
  • Orientation:
    • Description: Defines the layout of the legend.
    • Options: Horizontal (default), Vertical.
  • Position:
    • Left: Auto, left, center, right.
    • Top: Auto, top, middle, bottom.

Pie​

  • Center X:
    • Description: The horizontal position of the pie chart's center.
    • Default: 50 (0 is left, 100 is right).
  • Center Y:
    • Description: The vertical position of the pie chart's center.
    • Default: 50 (0 is bottom, 100 is top).
  • Inner Radius:
    • Description: The radius of the inner circle (used for donut charts).
    • Default: 0
  • Outer Radius:
    • Description: The radius of the outer circle.
    • Default: 70

For Each Slice​

  • Slice Color:
    • Description: The color of the slice, defined using a hexadecimal color code.
    • Picker: Allows users to select a color visually.

4. Actions​

The Pie Chart component does not currently support any actions, as it is a static visualization tool.

5. Best Practices for UI/UX​

When and Why to Use​

  • Use the Pie Chart component to represent proportions or percentages of a whole.
  • Ideal for applications that require users to compare categories or visualize distributions.

Effective Scenarios​

  • Desktop: Use for dashboards or reports where detailed data visualization is required.
  • Tablet/Smartphone: Ensure the chart is responsive and legible on smaller screens.

Tips for Optimal Use​

  • Limit the number of slices to avoid cluttering the chart.
  • Use contrasting colors for slices to improve readability.
  • Position the legend effectively to avoid overlapping with the chart.

6. Security Considerations​

Potential Risks​

  • External Resources: If the chart's data or styling is loaded from external sources, ensure they are trustworthy.

Best Practices​

  • Use secure HTTPS connections for any external resources.
  • Validate and sanitize all input data to prevent injection attacks.
  • Test the chart's responsiveness and behavior across different devices and screen sizes.